<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用dom来操作css</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: relative;
            left: 0;
        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function () {
              //点击按钮以后修改div的大小 先获取宽度和高度
            box1.style.backgroundColor="yellow";

            };
           var btn02=document.getElementById("btn02");
            btn02.onclick=function () {
               alert(box1.style.backgroundColor);//值为空 因为读取的是内联样式 而不是样式样式表里的样式 background-color: #bfa;
            };
            var btn03=document.getElementById("btn03");
            btn03.onclick=function () {
                 // alert(box1.currentStyle.width);//仅支持IE 其他浏览器不支持
                //
               // var obj= getComputedStyle(box1,null);
               // alert(obj.width);
                alert(getStyle(box1,"width"));
            };
        };
        /*  */
        function getStyle(obj,name){
            // if (window.getComputedStyle){
            //     return getComputedStyle(obj,null)[name];//正常浏览器的方式
            // }else {
            //     return obj.currentStyle[name];//IE
            // }
            return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

        }
    </script>
</head>
<body>
<script>
    /*1.通过js修改元素的样式
    *        语法 :
    *               元素.style.样式名=样式值
    *          如果css命名样式中带- 不合法 在js中需要驼峰命名
    *           比如background-color 在JS中修改为backgroundColor
    *           注意:
    *               设置的是内联样式 优先级较高，所以一点击就执行了
    *               样式表里的!important 优先级最高 一般不用
    *2.读取样式
    *       语法:
    *           元素.style.样式名
    *       注意:读取的是内联样式 不是样式表里的样式
    * 3.获取样式
    *      3.1.语法：元素.currentStyle.样式名=样式值 仅IE支持其他浏览器不支持  是只读的 不能修改
    *      3.2 getComputedStyle(box1,null) box1是要获取谁的当前元素样式 null是伪元素 固定的 是只读的 不能修改
    *           该方法可以直接使用 返回一个对象 对象的样式都封装在里面
    *
    * */
</script>
<button id="btn03">3按钮</button>
<button id="btn01">2按钮</button>
<button id="btn02">1按钮</button>
<br />
<br />
<div id="box1"></div>
</body>
</html>